<script setup>

import KsIcon from '../packages/components/KsIcon.vue'

const handleClick = ()=>{
  console.log('icon点击了')
}
</script>

<template>
  <header class="app">
    <div class="wrapper">
      <!--<KsIcon />-->
      <KsIcon icon-name="icon-xianhua-lvzhi" @iconClick="handleClick" />
      <KsIcon icon-name="icon-chongwuyongpin" />
      <KsIcon svg-class="ks-icon" icon-name="icon-chongwuyongpin" />
    </div>

    <div class="wrapper">
      <KsButton :btn-class="'primary'">搜索</KsButton>
      <KsButton :btn-class="'danger'">搜索2</KsButton>
      <KsButton :btn-class="'danger'" label="搜素3">
      </KsButton>
      <KsButton :btn-class="'danger'">
        <KsIcon icon-name="icon-haixianshuichan"></KsIcon>
      </KsButton>
    </div>
  </header>
</template>

<style scoped>
.wrapper :deep(.ks-icon){
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.ks-icon {
  //width: 1em;
  //height: 1em;
  //vertical-align: -0.15em;
  //fill: currentColor;
  //overflow: hidden;
}
</style>
